<template>

  <a-modal :width="1200"
           :title="title"
           :visible="modalVisible"
           @ok="handleCancel"
           @cancel="modalVisible=false"
           cancelText="关闭"
  >
    <a-card :bordered="false">

      <!-- table区域-begin -->
      <div>
        <div class="" style="width: 1100px; height: 100px;display: flex" >
          <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-model="patientInfo.name" disabled></a-input>
          </a-form-item>
          <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <span v-if="patientInfo.sex == 1">
                    <a-input placeholder="男" disabled />
             </span>
            <span v-if="patientInfo.sex == 2">
                  <a-input placeholder="女" disabled ></a-input>
             </span>
          </a-form-item>
          <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input  v-model="patientInfo.mobile" disabled></a-input>
          </a-form-item>
          <a-form-item label="生日" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input  v-model="patientInfo.birthday" disabled></a-input>
          </a-form-item>
          <a-form-item label="身高" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input  v-model="patientInfo.height" disabled></a-input>
          </a-form-item>
          <a-form-item label="体重" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input  v-model="patientInfo.weight" disabled></a-input>
          </a-form-item>

        </div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :data="loadData"
          :columns="columns"
          :dataSource="inquiryInfo"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          class="j-table-force-nowrap"
          @change="handleTableChange">

          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="pcaSlot" slot-scope="text">
            <div>{{ getPcaText(text) }}</div>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </template>

          <span slot="action" slot-scope="text, record">
             <a @click="showModal(record)">问诊单详情</a>
        </span>
        </a-table>
      </div>

      <a-modal
        title="问诊单"
        style="top: 20px;"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        :width="1800"
        v-model="visible"
        @ok="handleOk"
      >

        <a-card :bordered="false">
          <div class="ann">
            <div class="an">
              <h3 class="sv">{{  data.title }}</h3>
              <div class="sv-y" v-for="a in data.detail">
                <div class="sv-a" v-if="a.type === 'text' ">{{ a.title }} :
                  <div class="sv-z">{{ a.data }}</div>
                </div>
                <div class="sv-a" v-else-if="a.type === 'remark'" >{{ a.title }}:
                  <div class="sv-z">{{ a.data }}</div>
                </div>
                <div class="sv-e" v-else-if="a.type === 'radio' ">{{ a.title }}:
                  <div class="sv-w" v-for="s in a.detail.items">
             <span v-if="a.replys">
               <input type="radio" :checked="a.replys === s.value" disabled="disabled">{{ s.value }}
             </span>
                    <span v-else>
               <input type="radio" disabled="disabled">{{ s.value }}
             </span>
                  </div>
                </div>
                <div class="sv-q" v-else-if="a.type === 'checkbox'">{{ a.title }}
                  <div class="sv-r" v-for="x in a.detail.items">
             <span v-if="a.replys">
               <input type="checkbox" :checked="a.replys.includes(x.value)" onclick="this.checked=!this.checked">{{ x.value }}
             </span>
                    <span v-else>
               <input type="checkbox" onclick="this.checked=!this.checked">{{ x.value }}
             </span>
                  </div>
                </div>

                <div class="sv-k" v-else-if="a.type === 'line' "></div>
              </div>

            </div>
          </div>
        </a-card>

      </a-modal>


      <patient-data-modal ref="patientDataModal"></patient-data-modal>
      <patient-modal ref="modalForm" @ok="modalFormOk"></patient-modal>
    </a-card>
  </a-modal>


</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'
import  PatientDataModal from './PatientDataModal'
import PatientModal from '@/views/patient/PatientModal'
import Area from '@comp/_util/Area'
import { getAction, getRoleList } from '@api/manage'
import STable from '../../list/UserList'

export default {
  name: "WxUserListModal",

  mixins:[JeecgListMixin, mixinDevice],
  components: {

    PatientDataModal,
    PatientModal,
    STable

  },
  data () {
    return {
      description: 'wx_userinfo管理页面',
      title:"患者信息",
      patientId:'',
      visible: false,
      modalVisible:false,
      labelCol: {
        xs: { span: 26 },
        sm: { span: 8 },

      },
      wrapperCol: {
        xs: { span: 26 },
        sm: { span: 16 },
      },
      data:{},
      columns: [
        {
          title:'问诊单编号',
          align:"center",
          dataIndex: 'id'
        },
        {
          title:'问诊医生',
          align:"center",
          dataIndex: 'doctorName'
        },
        {
          title:'创建时间',
          align:"center",
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return getRoleList(parameter)
          .then(res => {
            return res.result
          })
      },

      url: {
        list: "/patient/patient/queryById",
        queryInquiry: "/inquiry/inquiryInfo/queryInquiry",
        web:"/inquiry/inquiryInfo/queryById",
      },
      patientInfo:{},   //患者数据
      inquiryInfo:{},   //问诊数据

    }
  },
  created() {
    this.pcaData = new Area()
    this.showPatien();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    initDictConfig(){
    },
    showPatien(record){
      let param = {};

      param.id = record.id;
      param.patientId= record.id;

      getAction(this.url.list, param).then(res => {
        this.patientInfo = res.result;
      })

      getAction(this.url.queryInquiry, param).then(res => {
        this.inquiryInfo = res.result;
      })

      this.modalVisible = true;
    },

    handleCancel(){
      this.modalVisible = false;
    },
    showModal(record) {
        let param = {};
        param.id  = record.id;

      getAction(this.url.web,param).then(res=>{
        let content = res.result.content;
        let  obj = JSON.parse(content);
        this.data = obj;
      })
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';

.ann{
  width: 100%;
  /*background-color: #f6f6f6;*/
}
.an{
  text-align: initial;
  background-color:  #f6f6f6;;
  width: 95%;
  margin:0% 3%;
}
.sv{
  text-align: center;
  padding-top: 15px;
  display: block ;
  background-color: lightskyblue;
  width:100%;
  height: 60px;
  line-height: 30px;
  font-size: 18px;
}
.sv-y{
  margin: 20px;
}
.sv-a{
  font-weight:bold;

}
.sv-z{
  margin-left: 4rem;
  border: #c7cbcd double 2px;
  padding: 10px;
}
.sv-e{
  font-weight:bold;
  display: flex;
  padding: 5px;
}
.sv-w{
  font-weight:bold;
  padding-left: 26px;
}
input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #2b4fe3;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}
.sv-q{
  display: flex;
  font-weight:bold;
  margin-left: 5px;
}
.sv-r{
  margin-left: 34px;

}
.sv-k{
  border-bottom:1px dashed #828080;
  overflow: auto;
}

</style>